import React, { Component } from "react";
import { connect } from "react-redux";
import { Link } from "react-router-dom";
import { CSSTransition } from "react-transition-group";
import {
  HeaderWrap,
  Logo,
  Nav,
  NavItem,
  NavSearch,
  Additioon,
  Button,
  SearchWrap,
  SearchBox,
  SbTitle,
  SbItemBox,
  SbItem,
} from "./style.js";
import { actionCreators } from "./store";
import { actionCreators as actionCreatorsLogin } from "../../page/login/store/index";
class Header extends Component {
  render() {
    let props = this.props;
    let { login, loginOut } = props;
    console.log(22223, props.list, login);
    return (
      <HeaderWrap>
        <Link to="/">
          <Logo></Logo>
        </Link>
        <Nav>
          <NavItem className="fl active">首页</NavItem>
          <NavItem className="fl">下载app</NavItem>
          {!login ? (
            <Link to="/login">
              <NavItem className="fr rihgt"> 登 录 </NavItem>{" "}
            </Link>
          ) : (
              <NavItem onClick={() => loginOut()} className="fr rihgt"> 退出</NavItem>
            )}
          <NavItem className="fr rihgt">
            <span className="iconfont">&#xe62f;</span>
          </NavItem>
          <SearchWrap
            onMouseEnter={props.mouseEnter}
            onMouseLeave={props.onMouseLeave}
          >
            <CSSTransition in={props.focused} timeout={1100} classNames="slide">
              <NavSearch
                onFocus={() => props.handleFocus(props.list)}
                onBlur={props.handleBlur}
                className={props.focused ? "focused" : ""}
              ></NavSearch>
            </CSSTransition>
            <span className={props.focused ? "focused iconfont" : "iconfont"}>
              &#xe6a6;
            </span>
            {this.setSearchDom(props.focused)}
          </SearchWrap>
        </Nav>
        <Additioon>
          <Link to="/write" >
            <Button className="writh">写文章</Button></Link>
          <Button>注册</Button>
        </Additioon>
      </HeaderWrap>
    );
  }
  
  setSearchDom(show) {
    const { list, enter, totalPage, page, getOtherPage } = this.props;
    const pageList = [];
    if (list.length) {
      for (let i = page * 6; i < (page + 1) * 6; i++) {
        if (list[i]) {
          pageList.push(<SbItem key={i}>{list[i].job}</SbItem>);
        }
      }
    }
    if (show || enter) {
      return (
        <SearchBox>
          <SbTitle>
            <span>热门搜索</span>
            <span
              className="right"
              onClick={() => getOtherPage(page, totalPage, this.spinIcon)}
            >
              <span
                ref={(icon) => {
                  this.spinIcon = icon;
                }}
                className="iconfont"
              >
                &#xe61f;
              </span>
              换一批
            </span>
          </SbTitle>
          <SbItemBox className="clearfix">{pageList}</SbItemBox>
        </SearchBox>
      );
    }
  }
}
const mapStateToProps = (state) => {
  return {
    // focused: state.get('header').get('focused'),
    //从immutable里面获取数
    focused: state.getIn(["header", "focused"]),
    list: state.getIn(["header", "list"]).toJS(),
    enter: state.getIn(["header", "enter"]),
    page: state.getIn(["header", "page"]),
    totalPage: state.getIn(["header", "totalPage"]),
    login: state.getIn(["login", "login"]),
  };
};
const mapDispathToProps = (dispatch) => {
  return {
    handleBlur() {
      const action = actionCreators.serchBlur();
      dispatch(action);
    },
    handleFocus(list) {
      const action = actionCreators.serchFouce();
      dispatch(action);
      console.log("1111", list.size);
      if (list.length === 0) {
        dispatch(actionCreators.getList());
      }
    },
    mouseEnter() {
      console.log("jinru");
      dispatch(actionCreators.acmouseEnter(true));
    },
    onMouseLeave() {
      console.log("离去");
      dispatch(actionCreators.acmouseEnter(false));
    },
    getOtherPage(page, totalPage, idom) {
      console.log("idon", idom);
      idom.style.transform = "rotate(160deg)";
      page++;
      dispatch(actionCreators.acgetOtherPage(page % totalPage));
    },
    loginOut() {
      dispatch(actionCreatorsLogin.changelogin(false))
    }
  };
};
export default connect(mapStateToProps, mapDispathToProps)(Header);
